<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <title>Title</title>
    <style>
        body{
            font-family: PingFang SC, Helvetica, sans-serif;
            font-size: 16px;
        }
        h1,h2,h3,h4,ul,body,p{
            margin: 0;
            padding: 0;
        }
        div{
            display: block;
        }
        a{
            text-decoration: none;
            color: #000;
            cursor: pointer;
        }
        li{
            list-style: none;
        }
        img{
            border: 0;
        }
        #header{
            height: 60px;
            line-height: 4.968rem;
            width: 100%;
            padding: 0;
            display: block;
            text-align: center;
            z-index: 100;
            position: relative;
            font-size: 1.9872rem;
            color: #1F1F1F;
            font-weight: 700;
        }
        #header_logo{
            width: 158px;
            position: absolute;
            left: 25px;
            cursor: pointer;
            color: #fff;
        }
        #img_wrapper{
            width: 39px;
            height: 39px;
            border-radius: 50%;
            float: right;
            position: relative;
            top: 50%;
            margin-top: -20px;
            margin-right: 50px;
            border: solid 1px #fff;
            text-align: center;
            cursor: pointer;
        }
        .menu_list{
            cursor: pointer;
            position: relative;
            z-index: 1;
            display: -webkit-box;
            height: 4.5rem;
            padding: 0 1.5rem;
            line-height: 3.2rem;
            margin: 10px;
        }
        .menu_list:hover{
            background: #F4F6FF;
        }
        .menu_list_current{
            background: #F4F6FF;
        }
        .li_line{
            position: relative;
            z-index: 1;
            zoom: 1;
            -webkit-box-flex: 1;
        }
        .mod_li_div{
            position: relative;
            z-index: 1;
            text-align: center;
            padding-top: 5px;
        }
        .form_group{
            margin-top: 20px;
            margin-right: 0;
            margin-left: 0;
            margin-bottom: 18px !important;
            display: flex;
            align-items: center;
        }
        label{
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }
        .control_lable{
            font-size: 14px;
            padding-top: 0px!important;
            color: #636363;
            font-weight: 200;
            margin-bottom: 0;
            text-align: left;
            width: 33.33333333%;
            position: relative;
            min-height: 1px;
            padding-right: 15px;
            padding-left: 15px;
            margin-left: 200px;
        }
        .setting-icon{
            margin-right: 15px;
            width: 32px;
            height: 32px;
            text-align: center;
            color: #fff;
            background-color: #a0a0a0;
            border-radius: 4px;
            display: inline-block;
            vertical-align: middle;
        }
        .setting-icon i{
            margin: 6px 0 0 1px;
            font-size: 16px;
            display: block;
        }
        :before{
            box-sizing: border-box;
        }
        .panel_heading{
            padding: 10px 15px;
            border-bottom: 1px solid transparent;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            background-color: #1b926c;
            box-shadow: 0 2px 20px 0 rgb(0 0 5%);
        }
        .panel_title{
            margin-top: 0;
            margin-bottom: 0;
            font-size: 16px;
            color: yellow;
        }
        .xigua-input{
            height: 32px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 12px;
            color: #333333;
            line-height: 18px;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 8px;
            box-shadow: none;
            -webkit-box-shadow: none;
            display: inline-block;
            max-width: 250px;
        }
        .xigua-input:hover{
            border: 1px solid #505766;
            box-shadow: none;
            background-color: #fff!important;
        }
        span{
            font-size: 12px;
        }
        img{
            vertical-align: middle;
            border: 0;
        }
    </style>
</head>
<body>
<div style="position: relative;
            min-height:100%;">
<header id="header" style="background-color: rgb(255, 255, 255);
                color: rgb(31, 31, 31);
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                position: fixed">
    <div style="float:left; height: 100%;width: 175px;padding-left: 25px">
        <span id="header_logo" style="float:left;">
            <img src="images/logoMain.png" style="width: 120%;">
        </span>
    </div>
    <div style="float: left;
padding-top: 10px;">
         <span   style="font-size: 18px;
                    line-height: 18px;
                    margin-left: 21px;
                    white-space: nowrap;">
    <span style="font-size: 15px;margin-left: 20%">用户中心</span>
    </span>
    </div>
    <div style="position: absolute;
                right: 0;
                top: 0;
                color: #333;
                line-height: 60px;
                font-size: 1.5456rem;
                height: 60px;">
        <div id="img_wrapper">
            <img src="https://euc.yonyoucloud.com/style/images/user.jpg" alt="" style="width: 35px;
                                                                                        height: 35px;
                                                                                        border-radius: 50%;
                                                                                        position: relative;
                                                                                       bottom: 10px;">
        </div>
        <span style="padding-right: 30px;
                        cursor: pointer;
                        color: #333;
                        line-height: 60px;
                        font-size: 16px;"><a href="index.html">返回首页</a></span>
    </div>
</header>
<div style="box-sizing: border-box;
            padding-top: 60px;">
    <div style="position: relative;
                width: 100%;
                list-style-type: none;
                display: -webkit-box;
                display: -ms-flexbox;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -moz-box-pack: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                vertical-align: top;
                background: #F3F5FB;
                justify-content: center;
                display: table;">
        <div style="height: 985px;
                    width: 245px;
                    max-width: 375px;
                    min-width: 225px;
                    vertical-align: top;
                    background: #fff;
                    display: table-cell;
                    float: left">
            <div id="menu" style="list-style-type: none">
                <div style="padding: 30px 15px 15px 15px;border: none;zoom: 1;position: relative;background-color: #fff;">
                    <div style="position: relative;list-style: none">
                        <div id="touxiang" style="    width: 60px;
                                        height: 60px;
                                        position: relative;
                                        margin: 0 auto;
                                        padding-bottom: 10px;
                                        cursor: pointer;
                                        top: 0;
                                        right: 0;">
                            <img v-if="user.picUrl==null" src="https://himg.bdimg.com/sys/portrait/item/******.jpg?tt=1634263225403" alt="" style="width: 60px;border-radius: 5.0784rem;">
                            <img v-if="user.picUrl!=null" :src="user.picUrl" alt="" style="width: 60px;border-radius: 5.0784rem;">
                        </div>
                        <p style="display: block;
                                font-size: 20px;
                                line-height: 26px;
                                color: #102233;
                                text-align: center;
                                padding-bottom: 10px;
                                font-weight: 700;">Hi</p>
                    </div>
                </div>
                <div style="margin: 0.9rem 0;">
                    <ul style="position: relative;
                                background: #FFFFFF;
                                overflow: hidden;
                                border-radius: 1.2rem;">
                        <li class="menu_list">
                            <div class="li_line">
                                <div class="mod_li_div">
                                    <div class="setting-icon">
                                        <i style="font-size: 22px" class="fa fa-address-card" aria-hidden="true"></i>
                                    </div>
                                    个人资料
                                </div>
                            </div>
                        </li>
                        <li class="menu_list">
                            <div class="li_line">
                                <div class="mod_li_div">
                                    <div class="setting-icon">
                                        <i style="font-size: 22px" class="fa fa-user-plus" aria-hidden="true"></i>
                                    </div>
                                    修改信息
                                </div>
                            </div>
                        </li>
                        <li class="menu_list">
                            <div class="li_line">
                                <div class="mod_li_div">
                                    <div class="setting-icon">
                                        <i style="font-size: 22px" class="fa fa-wrench" aria-hidden="true"></i>
                                    </div>
                                    更改密码
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div style="    position: relative;

                        right: 15%;
                        vertical-align: top;
                        min-width: 320px;
                        display: table-cell;">
            <div style="min-height: 985px;
                            background: none;
                            padding: 0;
                            -webkit-box-shadow: none;
                            box-shadow: none;
                            position: relative;
                            margin: 30px;
                            border-radius: 12px;
                            -webkit-box-sizing: border-box;
                            box-sizing: border-box;">
                <div id="show" style="width: 100%;
                    box-shadow: 0 2px 20px 0 rgb(0 0 5%);
                    border-radius: 12px;
                    height: 500px;
                    list-style-type: none;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -moz-box-pack: center;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    -webkit-justify-content: center;
                    vertical-align: top;
                    background: #fff;
                    justify-content: center;
                    display: table">
                    <div class="vshow"  v-show="index1" id="vshow1">

                        <div class="panel_heading">
                            <h2 class="panel_title">个人信息</h2>
                        </div>
                        <div class="form_group">
                            <label class="control_lable">
                                <span>昵称：</span><span v-text="user.nick"></span>
                            </label>
                        </div>
                        <div class="form_group">
                            <label class="control_lable">
                                <span>邮箱：</span><span v-text="user.mail"></span>
                            </label>
                        </div>
                        <div class="form_group">
                            <label class="control_lable">
                                <span>电话：</span><span v-text="user.phone"></span>
                            </label>
                        </div>
                        <div class="form_group">
                            <label class="control_lable">
                                <span>生日：</span><span v-text="user.birthday"></span>
                            </label>
                        </div>
                        <div class="form_group">
                            <label class="control_lable">
                                <span>注册日期：</span><span v-text="user.regTime"></span>
                            </label>

                        </div>
                        <div class="form_group">
                            <label class="control_lable">
                                <span>最后登录时间：</span><span v-text="user.lastTime"></span>
                            </label>
                        </div>
                        <div class="form_group">
                            <label class="control_lable">
                                <span>转存次数：</span><span v-text="user.transferTimes"></span>
                            </label>
                        </div>
                        <div class="form_group">
                            <label class="control_lable">
                                <span>被转存次数：</span><span v-text="user.transferredTimes"></span>
                            </label>
                        </div>
                        <div class="form_group">
                            <label class="control_lable">
                                <span>上传次数：</span><span v-text="user.upTimes"></span>
                            </label>
                        </div>
                        <div class="form_group">
                            <label class="control_lable">
                                <span>下载次数：</span><span v-text="user.downTimes"></span>
                            </label>
                        </div>
                    </div>

                    <div class="vshow"  v-show="index2">
                        <div class="panel_heading">
                            <h2 class="panel_title">修改资料</h2>
                        </div>
                        <form action="" enctype="multipart/form-data">
                        <div class="form_group">
                            <label class="control_lable">
                                <span>昵称</span>
                            </label>
                            <div class="info_label">
                                <input type="text" class="xigua-input" autocomplete="off" style="width: 250px" name="nick">
                            </div>
                        </div>
                        <div class="form_group">
                            <label class="control_lable">
                                <span>邮箱</span>
                            </label>
                            <div class="info_label">
                                <input type="text" class="xigua-input" autocomplete="off" style="width: 250px" name="mail">
                            </div>
                        </div>
                        <div class="form_group">
                            <label class="control_lable">
                                <span>电话</span>
                            </label>
                            <div class="info_label">
                                <input type="text" class="xigua-input" autocomplete="off" style="width: 250px" name="phone">
                            </div>
                        </div>
                        <div class="form_group">
                            <label class="control_lable">
                                <span>生日</span>
                            </label>
                            <div class="info_label">
                                <input type="date" class="xigua-input" autocomplete="off" style="width: 250px" name="birthday">
                            </div>
                        </div>
                        <div class="form_group">
                            <label class="control_lable">
                                <span>头像</span>
                            </label>
                            <div class="info_label">
                                <div style="position: relative;text-align: left;">
                                    <div style="position: relative;
                                                display: inline-block;
                                                color: #fff;
                                                text-align: center;
                                                border-radius: 3px;
                                                overflow: hidden;">
                                        <span style="color: rgb(170, 170, 170);
                                                    position: absolute;
                                                    left: 80px;
                                                    cursor: pointer;
                                                    display: none;">
                                            <span style="cursor: pointer;
                                                        font-size: 12px;
                                                        color: rgb(102, 102, 102);"></span>
                                        </span>
                                        <div style="color: black">

                                                <div style="text-align: center">
                                                    <input type="file" name="picFile">
                                                </div>
                                        </div>
                                    </div>
                                    <div style="position: absolute;
                                                inset: 0px auto auto 0px;
                                                width: 80px;
                                                height: 80px;
                                                overflow: hidden;">
                                        <label style="opacity: 0;
                                                    width: 100%;
                                                    height: 100%;
                                                    display: block;
                                                    cursor: pointer;
                                                    background: rgb(255, 255, 255);"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="padding-top: 24px;
                                    margin-bottom: 8px !important;">
                            <label style="font-size: 14px;
                                        line-height: 32px;
                                        margin-bottom: 0;
                                        text-align: right;
                                        position: relative;
                                        min-height: 1px;
                                        padding-right: 15px;
                                        padding-left: 15px;
                                        width: 33.33333333%;
                                        color: #636363;
                                        float: left;
                                        font-weight: 200;
                                          padding-top: 0px!important;"></label>
                            <div style="font-size: 14px;
                                    padding-top: 0px!important;
                                    color: #666666;
                                    font-weight: 200;
                                    float:left;
                                    margin-bottom: 0;
                                    width: 66.66666667%;
                                    position: relative">
                                <button style=" background: linear-gradient(to right top, #ee2223, #fc4c2f);
                                            border-radius: 4px;
                                            min-width: 68px;
                                            padding: 6px 8px;
                                            height: 32px;
                                            font-size: 12px;
                                            color: #FFFFFF;
                                            line-height: 18px;
                                            border: none;
                                            text-align: center;
                                            outline: none;
                                            display: inline-block;
                                            -webkit-appearance: button;
                                            cursor: pointer;" @click="upload(user.uid)">
                                    <span>提交</span>

                                </button>
                            </div>
                        </div>
                        </form>
                    </div>

                    <form action="" id="updatePassword">
                        <div class="vshow"  v-show="index3">
                            <div class="panel_heading">
                                <h2 class="panel_title">修改密码</h2>
                            </div>
                            <div class="form_group">
                                <label class="control_lable">
                                    <span>原密码</span>
                                </label>
                                <div class="info_label">
                                    <input name="oldPassword" type="password" class="xigua-input" autocomplete="off" style="width: 250px">
                                </div>
                            </div>
                            <div class="form_group">
                                <label class="control_lable">
                                    <span>新密码</span>
                                </label>
                                <div class="info_label">
                                    <input name="newPassword1" type="password" class="xigua-input" autocomplete="off" style="width: 250px">
                                </div>
                            </div>
                            <div class="form_group">
                                <label class="control_lable">
                                    <span>确认新密码</span>
                                </label>
                                <div class="info_label">
                                    <input name="newPassword2" type="password" class="xigua-input" autocomplete="off" style="width: 250px">
                                </div>
                            </div>
                            <div style="padding-top: 24px;
                                        margin-bottom: 8px !important;">
                                <label style="font-size: 14px;
                                            line-height: 32px;
                                            margin-bottom: 0;
                                            text-align: right;
                                            position: relative;
                                            min-height: 1px;
                                            padding-right: 15px;
                                            padding-left: 15px;
                                            width: 33.33333333%;
                                            color: #636363;
                                            float: left;
                                            font-weight: 200;
                                              padding-top: 0px!important;"></label>
                                <div style="font-size: 14px;
                                        padding-top: 0px!important;
                                        color: #666666;
                                        font-weight: 200;
                                        float:left;
                                        margin-bottom: 0;
                                        width: 66.66666667%;
                                        position: relative">
                                    <button @click="updatePassword()" style=" background: linear-gradient(to right top, #ee2223, #fc4c2f);
                                                border-radius: 4px;
                                                min-width: 68px;
                                                padding: 6px 8px;
                                                height: 32px;
                                                font-size: 12px;
                                                color: #FFFFFF;
                                                line-height: 18px;
                                                border: none;
                                                text-align: center;
                                                outline: none;
                                                display: inline-block;
                                                -webkit-appearance: button;
                                                cursor: pointer;">
                                        <span>更改</span>
                                    </button>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!--引入处理时间格式的js文件-->
<script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>
<script>
    let id1=0;
    $(".menu_list:first").addClass("menu_list_current");
    $(".menu_list").click(function (){
        $(".menu_list:eq("+id1+")").removeClass("menu_list_current");
        id1=($(this).index());
        $(this).addClass("menu_list_current");
        if(id1==0){
                vm.index1=true
                vm.index2=false
                vm.index3=false
        }else if(id1==1){
            vm.index1=false
            vm.index2=true
            vm.index3=false
        }else{
            vm.index1=false
            vm.index2=false
            vm.index3=true
        }
    })
    let vm = new Vue({
        el:"#show",
        data:{
            index1:true,
            index2:false,
            index3:false,
            user:{}
        },
        created:function (){
            axios.get("/user/selectById").then(function (response) {
                    vm.user = response.data;
                    vm.user.regTime = moment(vm.user.regTime).format("YYYY-MM-DD HH时mm分ss秒")
                    touxiang_vm.user = vm.user;
                    })
        },
        methods:{
            upload:function (uid) {
                let data = new FormData(document.querySelector("form"));
                let file = data.get("picFile");
                if (file.name == "") {
                    alert("请选择上传图片!");
                    return;
                }
                if (confirm("您确认要修改吗")) {
                axios.post("user/upload?uid=" + uid, data).then(function () {
                    location.reload()
                })
                }
            },
            updatePassword:function () {
                let data = new FormData(document.querySelector("#updatePassword"));
                axios.post("/user/updatePassword",data).then(function (response) {
                    alert(response.data);
                })

            }
        },
    })
    let touxiang_vm = new Vue({
        el:"#touxiang",
        data:{
            user:{}
        },
    })
</script>
</body>
</html>